<template>
  <div class="boxTitle boxMargin">
    <div class="title ">
      <h1 style="">{{pageData.solvePlanBase.planValueBack}}</h1>
      <h2>{{pageData.solvePlanBase.planValue}}</h2>
    </div>
  </div>

  <div class="dataList">
    <div class="item" v-for="item in pageData.valueLists">
      <div class="imgBox">
        <img :src="item.imgUrl">
      </div>
      <div class="title">{{item.title}}</div>
      <div class="text">{{item.titleDesc}}</div>
    </div>

  </div>
</template>

<script setup>
  import {ref} from 'vue'

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })
</script>

<style scoped lang="scss">
  @media screen and (max-width: 1079px) {
    .boxMargin{
      margin-top: 10px;
    }
    .dataList{
      display: flex; flex-wrap: wrap; margin-bottom: 20px;
      .item{
        width: calc( 50% - 5px ); margin-top: 10px;
        &:nth-child(2n){
          margin-left: 5px;
        }
        &:nth-child(2n+1){
          margin-right: 5px;
        }
        img{
          width: 100%; height: auto; display: block;
        }
        .title{
          font-size: 16px; padding-top: 8px;
        }
        .text{
          font-size: 14px; padding-top: 5px;
        }
      }
    }
  }

  @media screen and (min-width: 1080px) {
    .boxMargin{
      margin-top: 4vw;
    }
    .dataList{
      display: flex; gap: 1vw; padding-bottom: 4vw;
      .item{
        flex: 1;
        .imgBox{
           height: 13.6vw; overflow: hidden;
          img{
            width: 100%; height: 100%; display: block; transition: all 0.5s;
            &:hover{
              transform: scale(1.05);
            }
          }
        }

        .title{
          font-size: 1.2vw; padding-top: 1vw;
        }
        .text{
          font-size: 0.9vw; padding-top: 1vw;
        }
      }
    }
  }



</style>
